﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<!--
/*
 * Really easy field validation with Prototype
 * http://tetlaw.id.au/view/blog/really-easy-field-validation-with-prototype
 * Andrew Tetlaw
 * Version 1.5.3 (2006-07-15)
 * 
 * Copyright (c) 2006 Andrew Tetlaw
 * http://www.opensource.org/licenses/mit-license.php
 */
 -->
	<head>
		<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script type="text/javascript" src="lib/prototype.js"></script>
		<script type="text/javascript" src="lib/effects.js"></script>
		<script type="text/javascript" src="lib/fabtabulous.js"></script>
		<script type="text/javascript" src="lib/validation_cn.js"></script>
		<link rel="stylesheet" type="text/css" href="styles/style.css" />
	</head>
	<body>
		<a name="allinone"/>
		<div id="container">
				<div id="mainmenu">
					<ul id="tabs">
						<li>
							<a href="#standard">Standard</a>
						</li>
						<li>
							<a href="#location-show-error">指定位置显示消息</a>
						</li>
						<li>
							<a href="#using-titles">使用title属性作为自定义消息</a>
						</li>
						<li>
							<a href="#no-element-ids">没有ID的元素</a>
						</li>
						<li>
							<a href="#auto-bind-form-valite-by-classname">通过"required-validate"为form自动绑定验证</a>
						</li>
					</ul>
				<div>
				<div class="bar">&nbsp;</div>
				<div class="panel" id="standard">
					<form id="standard-form" action="#" method="get">
					<fieldset>
						<legend>Form</legend>
						<div class="form-row">
							<div class="field-label"><label for="field1">Name</label>:</div>
							<div class="field-widget"><input name="field1" id="field1" class="required" title="Enter your name" /></div>
						</div>
						<div class="form-row">
							<div class="field-label"><label for="field3">Employee Number</label>:</div>
							<div class="field-label"><input name="field3" id="field3" class="required validate-alphanum" title="Enter your employee number, please use only alphanumeric characters" /></div>
						</div>
						<div class="form-row">
							<div class="field-label"><label for="field4">Age</label>:</div>
							<div class="field-label"><input name="field4" id="field4" class="validate-number"  title="Optional: Enter your age"/> (optional)</div>
						</div>
						<div class="form-row">
							<div class="field-label"><label for="field14">MinLength=4 and MaxLength=10</label>:</div>
							<div class="field-label"><input name="field14" id="field14" class="required min-length-4 max-length-10"/></div>
						</div>
						<div class="form-row">
							<div class="field-label"><label for="field24">File:png jpg</label>:</div>
							<div class="field-label"><input name="field24" id="field24" type='file' class="required validate-file-png-jpg" /> </div>
						</div>
						<div class="form-row">
							<div class="field-label"><label for="field34">Validate Float Range -2.1至3.1</label>:</div>
							<div class="field-label"><input name="field34" id="field34" type='text' class="required validate-float-range--2.1-3.1" /> </div>
						</div>
						<div class="form-row">
							<div class="field-label"><label for="field44">Validate Int Range -1至2</label>:</div>
							<div class="field-label"><input name="field44" id="field44" type='text' class="required validate-int-range--1-2" /> </div>
						</div>
						<div class="form-row">
							<div class="field-label"><label for="field54">Validate Length Range 3至8</label>:</div>
							<div class="field-label"><input name="field54" id="field54" type='text' class="required validate-length-range-3-8" /> </div>
						</div>
						<div class="form-row">
							<div class="field-label"><label for="field64">Max Value 8</label>:</div>
							<div class="field-label"><input name="field64" id="field64" type='text' class="required max-value-8" /> </div>
						</div>
						<div class="form-row">
							<div class="field-label"><label for="field74">Min Value 10</label>:</div>
							<div class="field-label"><input name="field74" id="field74" type='text' class="required min-value-10" /> </div>
						</div>
						<div class="form-row">
							<div class="field-label"><label for="field94">Validate by pattern = /^[a]$/i</label>:</div>
							<div class="field-label"><input name="field94" id="field94" type='text' class="required validate-pattern-/^[a]$/i"> </div>
						</div>
						<div id="form-row" class="form-row">
							<div class="field-label"><label for="field1101">id number</label>:</div>
							<div class="field-widget"><input name="field1101" id="field1101" class="required validate-id-number"/></div>
						</div>
						<div class="form-row">
							<div class="field-label"><label for="field1094">Use title by class name</label>:</div>
							<div class="field-label"><input name="field1094" id="field1094" type='text' class="required useTitle" title='通过在class 使用useTitle显示此信息'/> </div>
						</div>
						<div class="form-row">
							<div class="field-label"><label for="field6">Sex</label>:</div>
							<div class="field-label">
								<input type="radio" name="field6" id="field6-male" value="Male" />Male<br />
								<input type="radio" name="field6" id="field6-female" value="Female" class="validate-one-required" />Female
							</div>
						</div>
						<div class="form-row">
							<div class="field-label"><label for="field5">Donation</label>:</div>
							<div class="field-label">
									<div id="advice-validate-currency-dollar-field5" class="custom-advice" style="display:none">That $ amount does not compute!</div>
									<input name="field5" id="field5" class="validate-currency-dollar" title="Enter a dollar amount for donation" /> (optional)
							</div>
						</div>
						<p><a href="#" onclick="$('email-signup').toggle(); return false">Sign me up for the email newletter!</a></p>
						<div id="email-signup" class="form-row" style="display:none;">
							<div class="field-label"><label for="field22">Email</label>:</div>
							<div class="field-widget"><input name="field22" id="field22" class="required validate-email" title="Optional: Enter your email address" /></div>
						</div>
					</fieldset>
					<input type="submit" value="Submit" /> <input type="button" value="Reset" onclick="valid.reset(); return false" />
					</form>
					<script type="text/javascript">
						function formCallback(result, form) {
							window.status = "valiation callback for form '" + form.id + "': result = " + result;
						}
						
						var valid = new Validation('standard-form',{immediate:true,onFormValidate:formCallback});
					</script>
				</div>

				<div class="panel" id="location-show-error">
					<form id="location-show-error-form" action="#" method="get">
						<fieldset>
							<legend>Form</legend>
							<div id="advice-location1" style="display:none" class="validation-advice"></div>
							<div class="form-row">
								<div class="field-label"><label>Name</label>:</div>
								<div class="field-widget"><input name="location1" id="location1" class="required" title="Enter your name. This is a required field" /></div>
								通过一个隐藏的div,id=advice-$inputId实现
							</div>
							<div class="form-row">
								<div class="field-label"><label>Age</label>:</div>
								<div class="field-label">
									<input name="location2" id="location2" class="required validate-number" />岁
									<div id="advice-location2" style="display:none" class="validation-advice"></div>
								</div>
							</div>
						</fieldset>
						<input type="submit" value="Submit" /> <input type="button" value="Reset" onclick="location_valid.reset(); return false" />
					</form>
					<script type="text/javascript">
						var location_valid = new Validation('location-show-error-form',{useTitles:true});
					</script>
				</div>
								
				<div class="panel" id="using-titles">
					<form id="test2" action="#" method="get">
						<fieldset>
							<legend>Form</legend>
							<div class="form-row">
								<div class="field-label"><label for="field1-t2">Name</label>:</div>
								<div class="field-widget"><input name="field1-t2" id="field1-t2" class="required" title="Enter your name. This is a required field" /></div>
							</div>
							<div class="form-row">
								<div class="field-label"><label for="field4-t2">Age</label>:</div>
								<div class="field-label"><input name="field4-t2" id="field4-t2" class="validate-number" title="Optional: Enter your age, please use only numbers" /> (optional)</div>
							</div>
						</fieldset>
						<input type="submit" value="Submit" /> <input type="button" value="Reset" onclick="valid2.reset(); return false" />
					</form>
					<script type="text/javascript">
						var valid2 = new Validation('test2', {useTitles:true});
					</script>
				</div>
				
				<div class="panel" id="no-element-ids">
					<form id="test3" action="#" method="get">
						<fieldset>
							<legend>Form</legend>
							<div class="form-row">
								<div class="field-label"><label for="field1-t3">Name</label>:</div>
								<div class="field-widget"><input name="field1-t3" class="required" title="Enter your name. This is a required field" /></div>
							</div>
						</fieldset>
						<input type="submit" value="Submit" /> <input type="button" value="Reset" onclick="valid3.reset(); return false" />
					</form>
					<script type="text/javascript">
						var valid3 = new Validation('test3');
					</script>
				</div>
				
				<div class="panel" id="auto-bind-form-valite-by-classname">
					<form id="test4" action="#" method="get" class='required-validate'>
						<fieldset>
							<legend>Form</legend>
							<div class="form-row">
								<div class="field-label"><label for="field1-t4">Name</label>:</div>
								<div class="field-widget"><input name="field1-t4" class="required" title="Enter your name. This is a required field" /></div>
							</div>
							<div class="form-row">
								<div class="field-label"><label for="field2-t4">Employee Number</label>:</div>
								<div class="field-label"><input name="field2-t4" class="required validate-alphanum" title="Enter your employee number, please use only alphanumeric characters" /></div>
							</div>
							<div class="form-row">
								<div class="field-label"><label for="field3-t4">Age</label>:</div>
								<div class="field-label"><input name="field3-t4" class="validate-number" title="Optional: Enter your age, please use only numbers" /> (optional)</div>
							</div>
							<div class="form-row">
								<div class="field-label"><label for="field4-t4">Chinese</label>:</div>
								<div class="field-label"><input name="field4-t4" class="required validate-chinese"/> </div>
							</div>
							<div class="form-row">
								<div class="field-label"><label for="field4-t5">IP</label>:</div>
								<div class="field-label"><input name="field4-t5" class="required validate-ip"/> </div>
							</div>
							<div class="form-row">
								<div class="field-label"><label for="field4-t6">mobile phone</label>:</div>
								<div class="field-label"><input name="field4-t6" class="required validate-mobile-phone"/> </div>
							</div>
							<div class="form-row">
								<div class="field-label"><label for="field4-t7">phone</label>:</div>
								<div class="field-label"><input name="field4-t7" class="required validate-phone"/> </div>
							</div>
							<div class="form-row">
								<div class="field-label">username:<input id='username'></div>
								<div class="field-label">confirm username :<input id='confirmUsername' class='validate-equals-username useTitle' title='应该与用户名一至'></div>
							</div>
							<div class="form-row">
								<div class="field-label">testValue:<input id='testValue'></div>
								<div class="field-label">less-than-testValue :<input id='testLessThen' class='less-than-testValue'></div>
								<div class="field-label">great-than-testValue :<input id='testGreatThen' class='great-than-testValue'></div>
							</div>
							<div class="form-row">
								<div class="field-label">validate-date-yyyy/MM/dd</div>
								<div class="field-label"><input id='testLessThen' class='validate-date-yyyy/MM/dd'></div>
							</div>
						</fieldset>
						<input type="submit" value="Submit" /> <input type="reset" value="Reset"/>
					</form>
				</div>
				
		</div>
		<script type="text/javascript">
			new Fabtabs('tabs');
		</script>
	</body>
</html>